<template>
	<view class="content">
		<view class="address">
			<text class="address-tlt">活动信息</text>
			<u-cell-group :border="false">
				<u--text
					:text="info.name"
					bold
					color="#333"
					customStyle="font-size:32rpx"
					margin="24rpx 14rpx 12rpx"
				></u--text>
				<u-cell :title="`报名时间：${info.applyEndTime}截止`" :border="false"></u-cell>
				<u-cell :title="`报名费用：${info.money}元/人`" :border="false"></u-cell>
				<u-cell
					:title="`报名方式：${
						info.competeRule === 1
							? '按支付顺序分配名额'
							: '需要审核参赛资格，通过审核后，需要抽签。'
					}`"
					:border="false"
				></u-cell>
			</u-cell-group>
			<view class="tips" v-if="info.child == 1">
				接受2名20岁以上成年人带领1-2名{{ info.min }}岁以下儿童，或一名20岁以上成年人带领1名{{
					info.min
				}}岁以下儿童，两种方式报名参赛。
			</view>
		</view>

		<view class="address" v-for="(item, index) in players" :key="index">
			<text class="address-tlt" style="margin-bottom: 24rpx">参赛人{{ index + 1 }}</text>
			<view class="user">
				<u-cell-group :border="false" @click.native="onEditSignInfo(index, item)">
					<!-- <u-cell
						title="姓名"
						:border="false"
						:value="item.name"
						@click="onEditPlayer(item, index)"
					>
						<u--text
							text="编辑"
							slot="right-icon"
							color="#0071c5"
							size="26rpx"
							suffixIcon="arrow-right"
							iconStyle="font-size:26rpx;color:#0071c5;margin-top:6rpx;"
						></u--text>
					</u-cell> -->
					<u-cell title="姓名" :border="false" :value="item.name"></u-cell>
					<u-cell
						title="选手类型"
						:border="false"
						:value="item.type == 1 ? '成人' : item.type == 2 ? '儿童' : ''"
					></u-cell>
					<u-cell title="证件号" :border="false" :value="item.cno"></u-cell>
					<u-cell title="报名信息" :border="false">
						<u--text
							slot="value"
							:text="(item.sign ? '修改' : '填写') + '报名信息，请点击此处'"
							color="#E60012"
							size="26rpx"
							block
							customStyle="min-width:400rpx;text-align:right"
						></u--text>
					</u-cell>
				</u-cell-group>
				<u-line dashed margin="10rpx 0 14rpx" color="#aaa"></u-line>
				<view class="flex-r">
					<u-button
						plain
						:text="`添加参赛人`"
						size="small"
						shape="circle"
						color="#0071c5"
						customStyle="width:160rpx;height:56rpx;"
						@click="onEditSignInfo(index + 1)"
					></u-button>
					<u-button
						plain
						text="删除参赛人"
						size="small"
						shape="circle"
						color="#898989"
						customStyle="width:160rpx;height:56rpx;margin-left:20rpx;"
						@click="onDelete(index)"
					></u-button>
				</view>
			</view>
		</view>

		<view class="footer">
			<button
				class="footer-btn"
				@click="onSubmit"
				:style="{ 'background-color': info.raceColor || '#0071c5' }"
			>
				立即报名
			</button>
		</view>
	</view>
</template>

<script>
const app = getApp()
import { appid } from '@/js/config/index.js'
import { loginHandle, getUserInfo } from '@/utils/mpWx.js'
const { uploadFunc } = require('@/utils/upload.js')
export default {
	data() {
		return {
			id: '',
			info: {},
			players: [],
			isLock: false
		}
	},
	async onLoad(options) {
		if (uni.getStorageSync('token')) {
			uni.showLoading({
				title: '数据加载中~'
			})
			const res = await getUserInfo()
			console.log(res)
			const userInfo = this.setUserinfo(res)
			this.players = [userInfo]
		}

		const eventChannel = this.getOpenerEventChannel()
		eventChannel.on('parentEvent', (data) => {
			this.info = data
			this.getGroup(this.info.cid)
			uni.setNavigationBarTitle({
				title: data.cname
			})
		})
	},
	methods: {
		/*
		* 这个方法没有使用啊。。。
		getDetailInfo(id) {
			// prettier-ignore
			this.$https( true, 'post', {
				url:'/race/race/info/'+this.info.cid,
				data: {}
			},(res) => {
				this.detailInfo = res.data
				console.log(this.orderSteps)
			})
			// prettier-ignore
		},
		*/
		// 赞助商提供的人员
		getGroup() {
			/* prettier-ignore */
			this.$https( true, 'get', {
				url:'/order/order/player/'+this.info.cid,
				data: {}
			},(res) => {
				console.log(res)
				if(res.data.length){
					this.players = res.data.map(item=>{
						return  this.setUserinfo(item)
					})
				}
			})
			/* prettier-ignore */
		},
		setUserinfo(res) {
			return {
				...res,
				name: res.trueName,
				mobile: res.mobile,
				type: res.playerType,
				cid: res.playerCid,
				cno: res.playerCidNo,
				sex: res.playerSex,
				country: res.playerCountry,
				born: res.playerBorn,
				age: res.playerAge,
				blood: res.playerBlood,
				clothes: res.playerClothes,
				province: res.playerProvince,
				city: res.playerCity,
				region: res.playerRegion,
				address: res.playerAddress,
				contact: res.contactName,
				telephone: res.contactTel
			}
		},
		// 删除参赛人
		onDelete(index) {
			if (this.players.length === 1) {
				uni.$u.toast('至少保留一条参赛人信息！')
				return
			}
			this.players.splice(index, 1)
		},
		onEditPlayer(item, index) {
			uni.navigateTo({
				url: '/pagesA/sign/addPlayer',
				events: {
					acceptData: (data) => {
						this.$set(this.players, data.index, data)
					}
				},
				success: (res) => {
					item.index = index
					res.eventChannel.emit('playerEvent', item)
				}
			})
		},
		onAddPlayer(index) {
			uni.navigateTo({
				url: '/pagesA/sign/addPlayer',
				events: {
					acceptData: (data) => {
						data.raceColor = this.info.raceColor
						this.$set(this.players, data.index, data)
					}
				},
				success: (res) => {
					const item = { index: index + 1 }
					res.eventChannel.emit('playerEvent', item)
				}
			})
		},
		// 修改报名信息
		onEditSignInfo(index, item = {}) {
			uni.navigateTo({
				url: '/pagesA/sign/addSignInfo',
				events: {
					acceptData: (data) => {
						this.$set(this.players, data.index, data)
					}
				},
				success: (res) => {
					item.index = index
					item.isFreeTrans = this.info.isFreeTrans
					// 增加赛事Id的参数啊。。。。。。
					item.race_id = this.info.cid
					// 作废隐藏字段 "hiddenField" 了啊。。。。。。
					//item.hiddenField = this.info.hiddenField
					// 是否显示紧急联系人
					item.isContact = this.info.isContact
					// 紧急联系人是否必填
					item.isContactMust = this.info.isContactMust
					// 是否显示选手区域地址
					item.isPalyerAddr = this.info.isPalyerAddr
					// 选手区域地址是否必填
					item.isPalyerAddrMust = this.info.isPalyerAddrMust
					// 是否显示选手收货地址
					item.isPostAddr = this.info.isPostAddr
					// 选手收货地址是否必填
					item.isPostAddrMust = this.info.isPostAddrMust
					item.raceColor = this.info.raceColor
					res.eventChannel.emit('signEvent', item)
				}
			})
		},
		// 立即报名
		async onSubmit() {
			const isComplate = this.players.every((item) => {
				return item.sign
			})
			if (!isComplate) {
				uni.$u.toast('请完善报名信息后提交！')
			} else if (this.info.child == 1 && this.players.every((item) => item.age <= 13)) {
				uni.$u.toast('非常抱歉，亲子跑儿童不能单独参赛！')
			} else {
				let { sign } = app.globalData.signInfo
				if (sign) {
					const result = await uploadFunc([{ url: sign }])
					sign = result[0].url
				}

				const data = {
					race: this.info.cid,
					group: this.info.id,
					sign: sign || '',
					players: this.players.map((item) => {
						return {
							...item,
							isSelf: item.checked ? 1 : 0, //是否本人，默认0不是，1是
							race: this.info.cid,
							group: this.info.id
						}
					}),
					questions: app.globalData.signInfo.questions || []
				}
				if (this.isLock) return
				this.isLock = true
				/* prettier-ignore */
				this.$https( true, 'post', {
					url:'/order/order/add',
					data:data
				},(result) => {
					// 3=先摇号后付费
					if(result.data==0 || this.info.competeRule==3){
						uni.redirectTo({
							url: '/pagesA/sign/payResult?type=success&money='+result.data
						})
					}else{
						uni.redirectTo({
							url: `/pagesA/sign/pay?raceId=${this.info.cid}&money=${result.data}`
						})
					}
						this.isLock = false
					// this.useWxPay(result)
				}, error=>{
					setTimeout(() => {
						this.isLock = false
					}, 1000)
				})
				/* prettier-ignore */
			}
		},
		async useWxPay() {
			const openid = await loginHandle()
			this.$https(
				true,
				'post',
				{
					url: '/order/order/pay',
					data: {
						openId: openid,
						raceId: this.info.cid
					}
				},
				(res) => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay',
						appId: appid,
						timeStamp: res.data.timeStamp, //当前的时间
						nonceStr: res.data.nonceStr, //随机字符串
						package: 'prepay_id=' + res.data.prepayId,
						signType: 'MD5', //签名算法，暂支持 MD5。
						paySign: res.data.paySign, //签名
						success: (pay) => {
							uni.$u.toast('报名成功！')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pagesA/sign/payResult?type=success'
								})
								this.isLock = false
							}, 1500)
						},
						fail: (error) => {
							console.log('失败', error)
							uni.$u.toast('支付失败，请重试！')
							setTimeout(() => {
								this.isLock = false
							}, 2000)
						}
					})
				},
				(error) => {
					setTimeout(() => {
						this.isLock = false
					}, 1000)
				}
			)
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 0 130rpx;
	position: relative;
}
.address {
	padding: 24rpx 28rpx;
	width: calc(702rpx - 56rpx);
	overflow-x: hidden;
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 auto 24rpx;
	&-tlt {
		font-size: 28rpx;
		color: #898989;
		border-bottom: 1px solid #e9e9e9;
		display: block;
		padding-bottom: 18rpx;
		&:before {
			display: inline-block;
			content: '';
			width: 8rpx;
			height: 30rpx;
			float: left;
			margin: 4rpx 10rpx 0;
			background-color: #0071c5;
		}
	}
}
.tips {
	background-color: #d4f0ff;
	font-size: 26rpx;
	color: #0071c5;
	padding: 16rpx 20rpx;
	line-height: 36rpx;
	margin: 12rpx 6rpx 10rpx;
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 684rpx;
		height: 82rpx;
		// background-color: #0071c5;
		// border: 1px solid #0071c5;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0;
	}
}
::v-deep {
	.u-cell .u-cell__body {
		padding: 4rpx 12rpx;
		.u-cell__title-text {
			font-size: 26rpx;
			color: #898989;
			min-width: 200rpx;
		}
		.u-cell__value {
			font-size: 28rpx;
			font-weight: 500;
			color: #231815;
		}
	}
	.u-button {
		margin: 0;
	}
}
</style>
